<template>
	<div class="container">
		<div class="top-header flex-center">
			<view class="time">统计时间: {{ query.mon }}</view>
			<div class="b-total flex-column">
				<text class="num">￥{{ toFixedNum(num) }}</text>
				<text class="tip">交易总额(元)</text>
			</div>
		</div>
		<!-- <div class="l-box flex-center">
			<view class="d-box flex-column" v-for="(item, i) in topData" :key="i" :class="{ line: i + 1 != topData.length }">
				<text class="num">{{ item.valueType == 'money' ? '￥' + toFixedNum(item.value) : item.value }}</text>
				<text class="title">{{ item.title }}</text>
			</view>
		</div> -->

		<view class="list">
			<!-- <view class="filter flex-space-between">
        <view class="total"
          >共计
          <text class="blue">2</text>
          台</view
        >
        <view class="time-box" @click="timePicker = true">
          <text class="time">{{ query.mon }}</text>
          <text class="iconfont icon-down"></text>
          <u-picker
            mode="time"
            v-model="timePicker"
            :default-time="query.mon"
            :params="params"
            title="选择年月"
            @confirm="pickerConfirmHandle"
            start-year="2021"
            @cancel="timePicker = false"
            confirm-color="#4888FB"
          />
        </view>
      </view> -->
			<view class="item card" v-for="(item, index) in list" :key="index" @click="toTradeDetail(item)">
				<view class="name">
					{{ item.agentName }}({{ item.agentNo }})
					<text v-if="item.agentNo == user.agentNo" class="iconfont icon-xiaoxi1 me"><text
							class="font">我</text></text>
				</view>
				<view class="data flex-space-between">
					<view class="tag-box flex-column">
						<text class="num">{{ toFixedNum(item.amount) }}</text>
						<text class="title">交易量(元)</text>
					</view>
					<view class="tag-box flex-column">
						<text class="num">{{ item.count }}</text>
						<text class="title">交易笔数</text>
					</view>
					<view class="tag-box flex-column">
						<text class="num">{{ toFixedNum(item.fee) }}</text>
						<text class="title">手续费总计</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="filterPopup" mode="top" :border-radius="20">
			<div class="filter-body">
				<!-- <view class="f-title">筛选条件</view> -->

				<div class="filter-content">
					<u-field label="月份：" :value="query.mon" :disabled="true" :label-width="170" input-align="left"
						@click="timePicker = true" placeholder="请选择" class="input">
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="timePicker = true"></text>
					</u-field>
					<u-field :disabled="true" label="政策：" :value="query.policyName" input-align="left"
						:label-width="170" placeholder="请选择" class="input" @click="showPicker = true">
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn"
							@click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button>
					</div>
				</div>
			</div>
		</u-popup>
		<u-picker
			title="品牌"
			v-model="showPicker"
			mode="selector"
			:range="policyList"
			range-key="policyName"
			confirm-color="#4888FB"
			@confirm="onPolicyConfirm"
			@cancel="showPicker = false"
		/>
		<u-picker mode="time" v-model="timePicker" :default-time="query.mon" :params="params" title="选择年月"
			@confirm="pickerConfirmHandle" start-year="2021" @cancel="timePicker = false" confirm-color="#4888FB" />
	</div>
</template>

<script>
	import {
		formDateToString,
		getCurrentMonthFirst1,
		getNowMonthNoDate
	} from '_c/utils/date';
	import {
		agentTradingList
	} from '_a/home';

	export default {
		data() {
			return {
				num: 0,
				topData: [{
					title: '交易笔数',
					value: 0,
					valueType: 'num'
				}, {
					title: '手续费总计(元)',
					value: 0,
					valueType: 'money'
				}],
				query: {
					mon: getNowMonthNoDate(new Date())
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
				},
				pageNum: 1,
				timePicker: false,
				filterPopup: false,
				showPicker: false,
				list: []
			};
		},
		computed: {
			user() {
				return this.$store.getters.user || {};
			},
			policyList() {
				return this.$store.getters.policyList || [];
			}
		},
		onNavigationBarButtonTap() {
			this.filterPopup = true;

			// this.$nav.push({ path: "/pages/home/terminal/operation" });
		},

		onLoad(o) {
			this.getList();
		},
		methods: {
			toTradeDetail(value) {
				uni.navigateTo({
				    url: '/pages/home/trading/index?agentNo=' + value.agentNo + '&agentName=' + value.agentName
				});
			},
			onPolicyConfirm(e) {
				console.log(e);
				this.query.policyCode = this.policyList[e[0]].policyCode;
				this.query.policyName = this.policyList[e[0]].policyName;
				// this.chooseIndex = e[0];
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					this.getList();
					// this.refreshLoad();
				});
			},
			resetHandle() {
				this.typename = '全部';
				this.query = {
					pageNum: 1,
					pageSize: 20
				};
			},
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.filterPopup = false;
			},
			pickerConfirmHandle(item) {
				console.log(item);
				this.query.mon = item.year + '-' + item.month;
				this.timePicker = false;
			},
			changeEChartType() {},
			getList() {
				let params = {
					...this.query
				};
				agentTradingList(params).then(res => {
					console.log(res.data.amount)
					if (this.pageNum == 1) {
						this.num = res.data.amount;
						this.topData[0].value = res.data.count;
						this.topData[1].value = res.data.fee;
					}
					var list = res.data.detail;
					// this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				});
			},
			reachBottomCallBack() {
				this.getList();
			}
		}
	};
</script>
<style scoped lang="scss">
	.container {
		padding: R(0) 0 R(25);
	}

	.top-header {
		background: $themeColor;
		padding: R(20px) 0;
		display: flex;
		align-items: center;
		position: relative;
		height: R(200px);
		color: #fff;
		position: relative;

		.time {
			position: absolute;
			top: R(-4px);
			left: R(54px);
			color: #eeeeeefc;
		}

		.b-total {
			text-align: center;

			.num {
				font-size: R(34px);
				font-weight: 600;
				margin-bottom: R(10);
			}

			.tip {
				font-size: R(26px);
				font-weight: 400;
				color: #eff4fe;
			}
		}

		.withdraw {
			position: absolute;
			right: R(30);
			top: R(80);
			width: R(147);
			height: R(68);
			line-height: R(68);
			text-align: center;
			background: rgba(255, 255, 255, 0.14);
			border-radius: R(30);
		}
	}

	.l-box {
		margin-bottom: R(26);
		justify-content: space-between;
		background: rgba(255, 255, 255, 0.94);
		margin: R(-50) R(25) R(20);
		border-radius: R(10);
		height: R(161);
		color: #808080;
		text-align: center;
		position: relative;
		z-index: 1;

		.d-box {
			width: 50%;
			text-align: center;
		}

		.num {
			font-size: R(34px);
			font-weight: bold;
			margin-bottom: R(20);
			color: #1a1a1a;
		}

		.title {
			font-size: R(26px);
			font-family: Source Han Sans CN;
			font-weight: 400;
			margin-top: auto;
			white-space: nowrap;
		}

		.sub {
			@extend .title;
			height: R(30);
		}

		.line {
			position: relative;
		}

		.line::after {
			content: '';
			position: absolute;
			background: #eee;
			width: 1px;
			height: R(94);
			right: 0;
			top: R(8);
		}
	}

	.list {
		background: #fff;
		border-radius: R(10);
		padding: R(20px) R(25);
		margin: R(-50) R(25) R(20);
		z-index: 1;
		position: relative;

		.filter {
			// padding: R(20);
			font-size: R(24px);
			font-weight: 400;
			color: #666666;
			margin-bottom: R(20);

			.total {
				font-size: R(24);
				font-weight: 400;
				color: #737373;

				.blue {
					color: #4286f5;
				}
			}

			.time-box {
				font-size: R(26);
			}

			.icon-xiajiantou {
				font-size: R(24);
				margin-left: R(14);
			}
		}
	}
	
	.card {
	  margin: 10px; /* 外边距 */
	  padding: 15px; /* 内边距 */
	  border-radius: 8px; /* 圆角 */
	  background-color: #ffffff; /* 背景色 */
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
	}

	.item {
		margin: R(28) R(0) 0;

		//   padding: R(0) R(0) 0;
		.data {
			.tag-box {
				width: 31%;
				text-align: center;
				padding: R(25) 0;
				border-radius: R(10);

				.num {
					font-size: R(30);
					margin-bottom: R(10);
				}

				.title {
					font-size: R(24);
				}
			}

			.tag-box:nth-child(1) {
				background: #fff3e4;
			}

			.tag-box:nth-child(2) {
				background: #e8f9db;
			}

			.tag-box:nth-child(3) {
				background: #ffefeb;
			}
		}

		.name {
			font-size: R(26);
			margin-bottom: R(20);

			.me {
				position: relative;
				color: #f3e8a1;
				font-size: R(46);

				.font {
					position: absolute;
					left: R(20);
					top: R(10);
					font-size: R(20);
					color: #000;
				}
			}
		}

		.title {
			font-size: R(30);
			font-weight: bold;
			color: #1a1a1a;
		}
	}

	.filter-body {
		padding: R(30);

		.f-title {
			font-size: R(30);
			text-align: center;
			font-weight: 400;
			color: #999;
		}
	}

	.filter-content {
		margin-bottom: R(30);
	}

	.filter-body .footer-btn {
		display: flex;
		/*position: absolute;*/
		bottom: 0;
		width: 100%;
	}

	.filter-body .footer-btn .btn-left {
		width: 30%;
		margin-left: 15%;
	}

	.filter-body .footer-btn .btn-right {
		width: 30%;
		margin-left: 10%;
	}

	.filter-body .filter-tiem {
		margin-bottom: R(25);
	}

	.filter-body .filter-tiem .tit {
		font-size: R(32);
		color: #333;
	}

	.filter-body .filter-tiem .select-list .select-item {
		float: left;
		width: 33%;
		padding: R(20) R(10);
	}

	.input {
		// width: 80%;
	}
</style>